<template>
    <div>
        <Card style="margin-bottom: 10px;">
            <h3>父组件</h3>
            <h4>{{ str }}</h4>
            <button @click="test($event)">点我</button>
        </Card>
        <Card>
            <Button @click="add">点击</Button>
            <hr />
            我的车是{{ car.brand }}，重量为{{ car.weight }}，{{ brand }}<br />
            我的车是{{ car2.brand }}，重量为{{ car2.weight }}，{{ brand }}<br />
            <hr />
            {{ talte }}
            <!-- 需要绑定属性为响应式 -->
            <input type="text" v-model="username" />
            {{ username }}
            <hr />
            <div>
                <h4>中国</h4>
                <h4 ref="title2">北京</h4>
                <h4>尚硅谷</h4>
                <Button @click="getuserdata">点击获取元素</Button>
                <Button @click="getuserren">我输出人</Button>
            </div>
            <div>
                我是儿子传递过来的参数：{{ toy }}
            </div>
        </Card>
        <Card style="margin-top: 10px;">
            <Person ref="ren"></Person>
        </Card>
        <Card style="margin-top: 10px;">
            <TestIndex a="哈哈哈" :list="data" :sendToy="gettoy"> </TestIndex>
        </Card>
        <Card style="margin-top: 10px;">
            <Children @abc-fyb="xyz"></Children>
        </Card>
    </div>
</template>
  
<script setup lang="ts">
// setup可以是一个渲染函数
// setup和传统的data、methods有什么区别，他们可以同时存在
import { Button, Card } from 'ant-design-vue';
import { ref, reactive, toRefs, toRef, computed, toRaw } from 'vue';
import Person from './componets/Person.vue'
import TestIndex from './componets/TestIndex.vue'
import Children from './componets/Children.vue'
import { personList } from './json.data'
//ref是定义一些基本类型的数据的响应式
// reactive定义一些对象类型数据\
// defineExpose导出允许查看组件实例对象
let name = 'name值'
let username = ref(0)
let address = '我是时代峰峻'
let telphone = '12334656'
//jsonData
let data = reactive(personList)
let car = reactive({ brand: "奔驰", weight: 234 })
// console.log("name:", username)
//toRaw将响应式数据转化为普通数据(不是响应)
console.log("car:", toRaw(car))
// 可以将对象取出来单个对象进行响应式
let { brand, weight } = toRefs(car)
// console.log(brand)
let car2 = toRaw(car)  // 非响应式
function add() {
    // name = '水电费是的'
    // username.value = '52'
    // 如果使用reactive重新赋值对象应该使用 Object.assign否则为失败
    // car = {brand:"丰田",weight:5555}
    // Object.assign(car, { brand: "丰田", weight: 5555 })
    // brand.value = '手动阀手动阀'
    car2.brand = '焚天'
}

let talte = computed(() => {
    return `我是用计算属性时时监听，我的车是${brand.value},重量为${weight.value}`
})

//用于存储ref的标记内容
let title2: any = ref();

function getuserdata() {
    console.log(document.getElementById("title2"))
    console.log(title2.value)
}

let ren: any = ref();
function getuserren() {
    console.log("我输出人:", ren.value.a)
    console.log("我输出人:", ren.value.b)
    console.log("我输出人:", ren.value.addres)
}

//子元素通过Props来传递参数给父亲
let toy = ref()
function gettoy(value: any) {
    toy.value = value
    console.log(value)
}
let str = ref('你好')
function test(ev: any) {
    console.log(ev)
    console.log("test")
    let a = 6;
    let b = 7;
    str.value = '哈哈'
}
function xyz(value) {

    console.log("我接受子传递的参数", value)
}
</script>
  
<style lang="scss" scoped></style>